<template>
    <div>
        <div class="login">
            <div class="maxbox">
                <div class="lgnheader">
                    <div class="title">{{$t('userlogin')}}</div>
                    <el-link class="langhand" @click="handlelang" v-if="isEn === 1">English</el-link>
                    <el-link class="langhand" @click="handlelang" v-if="isEn === 0">中文</el-link>
                </div>
                <el-form :model="userForm" :rules="loginRules" :ref="userForm">
                    <el-form-item prop="username">
                        <el-input v-model.trim="userForm.username" :placeholder="$t('iptuname')">
                            <i slot="prefix" class="el-input__icon el-icon-user"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" v-model.trim="userForm.password" :placeholder="$t('iptpwd')" show-password>
                            <i slot="prefix" class="el-input__icon el-icon-lock"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item class="code">
                        <span>{{$t('vercode')}}</span>
                        <el-input class="authInput" v-model.trim="userForm.imgCode" @keyup.enter.native="userLogin(userForm)"></el-input>
                        <el-image :src="imgSrc"></el-image>
                        <span @click="refresh" class="reftitle">{{$t('ref')}}</span>
                    </el-form-item>
                    <el-button type="primary" @click="userLogin(userForm)" round v-preventReClick>{{$t('lgimm')}}</el-button>
                    <!-- <el-checkbox v-model="checked" class="autolgn">{{$t('autolg')}}</el-checkbox>
                    <div class="losePwd">{{$t('fgpwd')}}?</div> -->
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import Cookies from 'js-cookie'
import {
    imgcode,
    userlogin
} from '@/libs/reqlist.js'
export default {
    data() {
        return {
            isEn: 1,
            boxheight: 0,
            // 用户填写的信息
            userForm: {
                username: '',
                password: '',
                // 验证码索引
                imgCodeIndex: '',
                imgCode: ''
            },
            // 登录验证
            loginRules: {
                username: [
                    { required: true, message: this.$t('iptuname'), trigger: 'blur' }
                ],
                password: [
                    { required: true, message: this.$t('iptpwd'), trigger: 'blur' }
                ]
            },
            // 图片路径
            imgSrc: '',
            // 是否自动登录
            checked: false,
            radio: '1',
            isReflogin: 0
        }
    },

    methods: {
        // 获取图片验证码
        getImgCode () {
            imgcode(JSON.stringify({ busType: 'SYS_LOGIN', length: 50, height: 20 })).then(res => {
                // 赋值
                this.userForm.imgCodeIndex = res.data.data.codeIndex
                this.imgSrc = res.data.data.img
            })
        },
        // user Login
        userLogin (form) {
            this.$refs[form].validate(valid => {
                if (!valid) return
                // 转换成formdata格式
                window.localStorage.setItem('username', this.userForm.username)
                let params = new URLSearchParams()
                params.append('username', this.userForm.username)
                params.append('password', this.userForm.password)
                params.append('imgCodeIndex', this.userForm.imgCodeIndex)
                params.append('imgCode', this.userForm.imgCode)
                // let params = this.userForm
                userlogin(params).then(res => {
                    if (res.data.code === '991003') {
                        this.$message.error(this.$t('otref'))
                        this.userForm.imgCode = ''
                        this.getImgCode()
                        return false
                    }
                    // 抛出错误
                    if (res.data.code === '991007') {
                        this.$message.error(this.$t('errotref'))
                        this.userForm.imgCode = ''
                        this.getImgCode()
                        return false
                    }
                    if (res.data.globalSeq === '991004') {
                        this.$message.error(res.data.data)
                        this.userForm.imgCode = ''
                        this.getImgCode()
                        return false
                    }
                    window.localStorage.setItem('autologin', this.checked)
                    window.localStorage.setItem('token', res.data.data.accessToken)
                    window.localStorage.setItem('refreshToken', res.data.data.refreshToken)
                    let date = new Date().getTime()
                    window.sessionStorage.setItem('refTime', date)
                    this.$message({
                        message: this.$t('loginsuc'),
                        type: 'success'
                    })
                    this.$router.push('/home')
                })
            })
        },
        // Refresh verification code
        refresh () {
            this.getImgCode()
        },
        handlelang () {
            if (this.isEn === 0) {
                Cookies.set('language', 'zh-CN')
                this.$router.go(0)
            }
            if (this.isEn === 1) {
                Cookies.set('language', 'en')
                this.$router.go(0)
            }
        }
    },
    mounted () {
        if (Cookies.get('language') === 'zh') this.isEn = 1
        if (Cookies.get('language') === 'en') this.isEn = 0
        this.userForm.username = localStorage.getItem('username')
        if (window.localStorage.getItem('isReflogin')) this.isReflogin = window.localStorage.getItem('isReflogin')
        this.getImgCode()
    }
}
</script>

<style lang="less" scoped>
@import './login.less';
</style>
